<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="订单编号: ">
          <el-input v-model="value" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="选择日期: ">
          <div class="block">
            <el-date-picker
              v-model="dataValue"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="140" />
        <el-table-column prop="orderNo" label="订单编号" width="240" />
        <el-table-column prop="skuName" label="商品名称" width="240" />
        <el-table-column prop="price" label="订单金额(元)" width="240" />
        <el-table-column prop="innerCode" label="设备编号" width="240" />
        <el-table-column label="订单状态" width="200">
          <template #default="{row}">
            <span>{{ condition[row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="订单日期" width="280" />
        <el-table-column width="140" label="操作">
          <template #default="{ row }">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 10px"
              @click="details(row)"
            >查看详情</el-link>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部 -->
    <div v-if="dataAll.totalCount>10">
      <el-row>
        <el-col
          :span="18"
        >共{{ dataAll.totalCount }}条记录 第 {{ dataAll.pageIndex }}/{{ dataAll.totalPage }} 页
          <div
            class="grid-content bg-purple"
          /></el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              :disabled="upShow"
              @click="up"
            >上一页</el-button>
            <el-button
              type="primary"
              :disabled="underShow"
              @click="under"
            >下一页<i

              class="el-icon-arrow-right el-icon--right"
            /></el-button>
          </el-button-group>
          <div
            class="grid-content bg-purple-light"
          /></el-col>
      </el-row>
    </div>
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 头部 -->
      <div class="title">
        <img src="" alt="">
        <span>出货成功</span>
        <img src="http://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt="" class="pic">
      </div>
      <!-- 内容 -->
      <el-row class="gd">
        <el-col
          :span="12"
        ><div>订单编号:{{ row.orderNo }}</div></el-col>
        <el-col
          :span="12"
        ><div>商品名称:{{ row.skuName }}</div></el-col>
      </el-row>
      <el-row class="gd">
        <el-col
          :span="12"
        ><div>设备编号:{{ row.innerCode }}</div></el-col>
        <el-col
          :span="12"
        ><div>订单金额:{{ row.price /10 }}</div></el-col>
      </el-row>
      <el-row class="gd">
        <el-col
          :span="12"
        ><div>完成时间:{{ row.updateTime }}</div>
        </el-col>

        <el-col
          :span="12"
        ><div>
          创建时间:{{ row.createTime }}</div></el-col>
      </el-row>
      <el-row class="gd">
        <el-col :span="12"><div>设备地址:{{ addr }}</div></el-col>
        <el-col
          :span="12"
        ><div>支付方式:{{ pay[row.payType] }}</div></el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import moment from 'moment'

import { orderSearch } from '@/api'
export default {
  data() {
    return {
      addr: '',
      pay: {
        1: '支付宝', 2: '微信'
      },
      dialogVisible: false, // 控制查看详情
      condition: {
        0: '创建', 1: '支付完成', 2: '出货成功', 3: '出货失败'
      },
      dataValue: '', // 日期
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      row: {},
      addVisible: false, // 控制添加的弹出层
      value: '',
      tableData: [], // 表格绑定
      dataAll: {}, // 全部数据
      from: {
        addValue: '' // 新增里的输入框
      },
      rules: {
        addValue: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },
  created() {
    this.publicFn()
  },
  methods: {
    handleClose() {
      // 查看详情的关闭方法
      this.dialogVisible = false
    },
    details(row) {
      // 查看详情
      this.dialogVisible = true
      // console.log(this.row.);
      this.addr = row.addr.split('-')[row.addr.split('-').length - 1]
      this.row = row
      console.log(row)
    },

    addVisibleFn() {
      // 添加弹出层的关闭方法
      this.addVisible = false
      this.from.addValue = ''
      this.$refs.form.resetFields() // 清空输入框
    },
    onSubmit() {
      // 查询按钮
      console.log(this.dataValue)
      // moment(this.dataValue).format('YYYY-MM-DD')
      // console.log(moment(this.dataValue).format('YYYY-MM-DD'))
      this.publicFn('', '', this.value, this.dataValue[0], this.dataValue[1])
    },
    // 公共
    async publicFn(pageIndex, pageSize, orderNo, startDate, endDate) {
      const { data } = await orderSearch({
        pageIndex: pageIndex,
        pageSize: pageSize,
        orderNo: orderNo,
        startDate: startDate,
        endDate: endDate
      })
      console.log(data)
      this.dataAll = data
      this.tableData = data.currentPageRecords
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.dataAll.pageIndex - 1, this.dataAll.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.dataAll.pageIndex + 1, this.dataAll.pageSize, '', '')
    }
  }
}
</script>
  <style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
  margin-top: 20px;
  background-color: #fff;
  padding: 5px;
}
.bottom {
  margin-top: 30px;
}
.btn {
  text-align: center;
}
.gd {
  margin-top: 10px;
}
.title {
  padding: 20px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .pic {
    margin-left: 220px;
  }
}
</style>

